<template>
    <div style="margin-top:10px;">
      <a-spin :loading="loading" style="width:100%;">
        <div class="zyrw_top">
            <div class="zyrw_top_item">
                <div class="zyrw_top_item_icon">
                      <!-- <icon-user size="35" style="color:#1F6CEB;"/> -->
                      <a-image width="50" :src="dxcImg"/>
                  </div>
                <div class="zyrw_top_item_right">
                    <div style="font-weight:bold; color:#000;">待卸车</div>
                    <div>
                        <span style="color:#68C1B2;font-size:18px; font-weight:bold;">{{checked == 'c'?total1:total3}}</span>
                        <span>{{checked == 'c'?'车':'吨'}}</span>
                    </div>
                </div>
            </div>
            <div class="zyrw_top_item">
                <div class="zyrw_top_item_icon">
                      <!-- <icon-user size="35" style="color:#1F6CEB;"/> -->
                      <a-image width="50" :src="thImg"/>
                  </div>
                <div class="zyrw_top_item_right">
                    <div style="font-weight:bold; color:#000;">提货</div>
                    <div>
                        <span style="color:#68C1B2;font-size:18px; font-weight:bold;">{{checked == 'c'?total2:total4}}</span>
                        <span>{{checked == 'c'?'车':'吨'}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 100%; margin-top: 10px">
          <div class="zyrw_type_box">
                    <div class="zyrw_type_box_item" @click="changeChecked('c')" :class="checked == 'c'?'zyrw_type_box_item_checked':''">按车统计</div>
                    <div class="zyrw_type_box_item" @click="changeChecked('d')" :class="checked == 'd'?'zyrw_type_box_item_checked':''">按吨统计</div>
                </div>
          <a-scrollbar style="height:390px;overflow: auto;">
              <div id="zyrw_charts" style="width: 100%;" :style="{height:chartsHeight+'px'}"></div>
          </a-scrollbar>
            </div>
        </a-spin>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import syApi from "@/api/home/sy";
import tool from '@/utils/tool'

import dxcImg from '@/assets/dxc.png'
import thImg from '@/assets/wblth.png'
const loading = ref(false)
import * as echarts from "echarts";
  onMounted(() => {
    getZxrwList();
  });
  const labels = ref([])
  const value1 = ref([])
  const value2 = ref([])
  const value3 = ref([])
  const value4 = ref([])
  const total1 = ref(0)
  const total2 = ref(0)
  const total3 = ref(0)
  const total4 = ref(0)

  const chartsHeight = ref(0)
  const getZxrwList = () => {
    loading.value = true
    syApi.getZxrwList().then((res) => {
        if (res.code == 200 && res.success) {
            let mlabels = []
            let mvalue1 = []
            let mvalue2 = []
            let mvalue3 = []
            let mvalue4 = []
            let list = res.data.load_list
            list.forEach(e => {
              mlabels.push(e.dept_name)
              mvalue1.push(e.daohuo_count)
              mvalue2.push(e.tihuo_count)
              mvalue3.push(e.daohuo_weight)
              mvalue4.push(e.tihuo_weight)
            })
            labels.value = mlabels
            value1.value = mvalue1
            value2.value = mvalue2
            value3.value = mvalue3
            value4.value = mvalue4
            total1.value = res.data.daohuo_count_all
            total2.value = res.data.tihuo_count_all
            total3.value = res.data.daohuo_weight_all
            total4.value = res.data.tihuo_weight_all
            chartsHeight.value = 150 + (list.length * 20)
            setTimeout(() => {
              changeChecked('c')
            }, 500);
            
            loading.value = false
        }else{
            console.log(e)
            loading.value = false
        }
    }).catch((e) => {
        console.log(e)
        loading.value = false
    })
  }

  const checked = ref("c")
  const changeChecked = (e) => {
    checked.value = e
    initCharts();
  }

  const initCharts = () => {
    var chartsBox = document.getElementById("zyrw_charts");
    var myChart = echarts.init(chartsBox);
    let option = {
      grid: {
          left: '20%',   //距离左边的距离
          right: '10%', //距离右边的距离
          bottom: '8%',//距离下边的距离
          top: '5%', //距离上边的距离
          },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      toolbox: {
        feature: {
          dataView: { show: false, readOnly: false },
          magicType: { show: false, type: ["line", "bar"] },
          restore: { show: false },
          saveAsImage: { show: false },
        },
      },
      legend: {
        data: checked.value == 'c'?["到货卸车（车）", "提货（车）"]:["到货卸车（吨）", "提货（吨）"],
      },
      xAxis: {
        type: 'value',
        show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
        axisTick:{
            show:false // 不显示坐标轴刻度线
        },
        axisLine: {
            show: false, // 不显示坐标轴线
        },
        axisLabel: {
            show: false, // 不显示坐标轴上的文字
        },
        splitLine:{
            show:false // 不显示网格线
        },
      },
      yAxis: {
        type: 'category',
        data: labels.value,
        show:true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
        axisTick:{
            show:false // 不显示坐标轴刻度线
        },
        axisLine: {
            show: false, // 不显示坐标轴线
        },
        axisLabel: {
            align: 'right',
            show: true, // 不显示坐标轴上的文字
            formatter: function (value) {
                let label = value
                if(value.length > 10){
                    label = value.substring(0,10)+'...'
                }
                return label
            }
        },
        splitLine:{
            show:false // 不显示网格线
        },
      },
      series: [
        {
          name: checked.value == 'c'?'到货卸车（车）':'到货卸车（吨）',
          type: "bar",
          stack: 'total',
          tooltip: {
            valueFormatter: function (value) {
              return value + (checked.value == 'c'?" 车":" 吨");
            },
          },
          barWidth: 16,
            emphasis: {
                focus: 'series'
            }, 
          data: checked.value == 'c'?value1.value:value3.value,
          itemStyle: {
            normal: {
              color: "#1F6CEB",
            },
          },
          label: {
            show: true, // 开启标签显示
            position: "inside", // 标签位置在柱子内部
            formatter: "{c}", // 显示柱子对应的数据值
            textStyle: {
                color: "#ffffff", // 文字颜色
                fontSize: 12, // 文字大小
                textAlign:'left'
            }
          }
        },
        {
          name: checked.value == 'c'?'提货（车）':'提货（吨）',
          type: "bar",
          stack: 'total',
          tooltip: {
            valueFormatter: function (value) {
              return value + (checked.value == 'c'?" 车":" 吨");
            },
          },
          barWidth: 16,
        emphasis: {
            focus: 'series'
        }, 
          data: checked.value == 'c'?value2.value:value4.value,
          itemStyle: {
            normal: {
              color: "#32D8DB",
            },
          },
          label: {
            show: true, // 开启标签显示
            position: "inside", // 标签位置在柱子内部
            formatter: "{c}", // 显示柱子对应的数据值
            textStyle: {
                color: "#ffffff", // 文字颜色
                fontSize: 12, // 文字大小
                textAlign:'left'
            }
          }
        }
      ],
    };
    myChart.setOption(option);
  };
</script>
<style scoped lang="less">
.zyrw_type_box{
        display:flex;
        justify-content:flex-end;
        height:30px;
        margin: 10px 0;
        font-size:14px;
        .zyrw_type_box_item:first-children{
            border-radius:3px 0 0 3px;
        }
        .zyrw_type_box_item{
            padding:2px 10px;
            background: #fff;
            color:#00000066;
            border: 1px solid #DCDCDC;
            cursor:pointer;
        }
        .zyrw_type_box_item_checked{
            padding:2px 10px;
            background:#68C1B2;
            color:#fff;
            border: 1px solid #68C1B2;
            border-radius:3px;
        }
    }
.aline{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zyrw_top{
    display:flex; 
    align-item:center;
    justify-content: space-between;
    margin:10px 0;
    height:70px;
    .zyrw_top_item{
        width:calc(50% - 20px);
        background-color:#FAFAFA;
        padding:10px 20px;
        border-radius:10px;
        display:flex;
        align-items:center;
        .zyrw_top_item_right{
            margin-left: 10px;
        }
        .zyrw_top_item_icon{
            // background: linear-gradient(155.47deg, #FFFFFF 9.19%, #BBCFEE 92.16%);
            width:50px;
            height:50px;
            border-radius: 15px;
            display:flex;
            align-items:center;
            justify-content: center;
        }
    }
}
</style>